<template>
  <q-tr :props="props" class="panda-table" :class="compute_table_row_bg(props.row)">
    <q-td
      class="panda-table"
      key="select"
      :style="compute_table_col_width('select')"
      :props="props"
    >
      <q-checkbox
        class="text-panda-text-dark"
        color="primary"
        style
        v-if="!props.row.is_child_showing"
        v-model="props.row.is_selected"
        @input="selected_table_items_change(props.row)"
      />
    </q-td>
    <q-td
      class="panda-table panda-table-col-checkbox"
      key="expanded"
      :style="compute_table_col_width('expanded')"
      :props="props"
    >
      <q-icon
        v-if="is_top_slot!=1"
        :name="props.row.show_expand?'remove':'add'"
        size="1em"
        v-show="props.row.relatedMatch&&props.row.relatedMatch.length>0"
        @click="table_item_click_expanded(props.row)"
      ></q-icon>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent no-padding"
      key="leagueName"
      :style="compute_table_col_leagueName_style(props.row)"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'leagueName',compute_table_item_show_name(props.row,'','leagueName'))"
      ></tablecellshow>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="beginTime"
      :style="compute_table_col_width('beginTime')"
      :props="props"
    >
      <!-- operateMatchStatus -->
      <span @click="table_item_click(props.row)">{{ compute_show_time(props.row, label_item) }}</span>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="homeTeamNames"
      :style="compute_table_col_width('homeTeamNames')"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'homeTeamNames',compute_table_item_show_name(props.row,'','homeTeamNames'))"
      ></tablecellshow>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="score"
      :style="compute_table_col_width('score')"
      :props="props"
    >
      <span @click="table_item_click(props.row)">{{ props.row.score || '-' }}</span>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="awayTeamNames"
      :style="compute_table_col_width('awayTeamNames')"
      :props="props"
    >
      <tablecellshow
        @click.native="table_item_click(props.row)"
        :str_arr="break_words_to_ellipsis(tablecolumns, 'awayTeamNames',compute_table_item_show_name(props.row,'','awayTeamNames'))"
      ></tablecellshow>
    </q-td>
    <q-td
      class="panda-table"
      key="neutralGround"
      :style="compute_table_col_width('neutralGround')"
      :props="props"
    >
      <span @click="table_item_click(props.row)">{{ props.row.neutralGround==1?"N":'-' }}</span>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="matchManageCode"
      :style="compute_table_col_width('matchManageCode')"
      :props="props"
    >
      <span @click="table_item_click(props.row)">{{ props.row.matchManageCode || '-' }}</span>
    </q-td>
    <q-td
      class="panda-table"
      key="liveOddSupport"
      :style="compute_table_col_width('liveOddSupport')"
      :props="props"
    >
      <span
        @click="table_item_click(props.row)"
        class="panda_icon_kgqp vertical-middle"
        style="height: 14px; font-size: 14px;}"
        v-if="props.row.liveOddSupport==1"
        :class="props.row.liveOddsBetStatus==1?'panda-icon-red':'panda-icon-base'"
      ></span>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="operateMatchStatus"
      :style="compute_table_col_width('operateMatchStatus')"
      :props="props"
    >
      <span @click="table_item_click(props.row)">
        <!-- matchSourceCode  开盘依据 根据riskManagerCode -->
        <span class="panda-round-dot" :class="compute_operateMatchStatus_dot_class(props.row)"></span>
        {{ compute_operateMatchStatus_show_text(props.row)}}
      </span>
    </q-td>
    <q-td
      class="panda-table panda-table-col-text-indent"
      key="operatorLiable"
      :style="compute_table_col_width('operatorLiable')"
      :props="props"
    >
      <span @click="table_item_click(props.row)">{{ props.row.operatorLiable || ''}}</span>
    </q-td>
    <q-td
      class="panda-table text-center"
      key="action"
      :style="compute_table_col_width('action')"
      :props="props"
    >
      <div v-if="is_top_slot!=1" @click="table_item_click(props.row)">
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,1)"
          @click="to_show_match_edit(props.row)"
        >对阵管理</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,2)"
        >赛事详情</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,1)"
          @click="to_show_open_edit(props.row)"
        >开盘管理</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,4)"
        >操盘管理</span>
        <span
          class="q-mx-sm panda-btn-table-handle"
          v-if="compute_if_handle_btn_show(props.row,5)"
          @click="handle_undo_associate_match(props.row)"
        >取消关联</span>
      </div>
    </q-td>
    <q-td
      class="panda-table"
      key="dataSourceCode"
      :style="compute_table_col_width('dataSourceCode')"
      :props="props"
    >
      <div class style="    margin-right: 14px;" v-if="compute_if_show_dataSourceCode(props.row)">
        <span
          @click="table_item_click(props.row)"
          class="panda-border panda-border-blue panda-text-blue border-radius-2px right-label-icon-like inline-block text-center"
          style="width:95px;"
          :style=" `color: ${props.row.dataSourceCode_color} !important;     border-color: ${props.row.dataSourceCode_color} !important; `"
        >{{ compute_dataSourceCode_fullname(props.row.dataSourceCode) }}</span>

        <div class="inline-block vertical-top">
          <div class="column" style="height:22px;">
            <div
              class="panda-px-2px"
              :class="props.row.dataSourceCode_col_dot_config.length>1?'col-6':'col-12'"
              v-for="(item,index) in props.row.dataSourceCode_col_dot_config"
              :key="`dot_${index}`"
              :style="props.row.dataSourceCode_col_dot_config.length>1?'line-height:10px':'line-height:20px'"
            >
              <span class="panda-round-dot" :style="`background-color: ${ item.color};`"></span>
            </div>
          </div>
        </div>
      </div>
    </q-td>
    <q-td
      class="panda-table"
      key="relatedMatch"
      :style="compute_table_col_width('relatedMatch')"
      :props="props"
    >
      <span>{{ props.row.not_commercialized_dataSourceCode_str }}</span>
    </q-td>
  </q-tr>
</template>
<style lang="stylus" scoped></style>
<script>
import { mapGetters, mapActions } from "vuex";
import { api_match } from "src/api/index.js";

import tableColWidthmixin from "src/mixins/style/tableColWidth.js";
import matchmixin from "src/mixins/pages/match/match.js";
// import { match_manage_tabledata } from "src/mock/match/index.js";
import match_manage_tabledata from "src/mock/match/match_manage.js";
import selectSportType from "src/components/query/selectSportType.vue";
import selectedTableItemMixin from "src/mixins/pages/match/selectedTableItem.js";
import dataSourceCode from "src/components/query/dataSourceCode.vue";
import selectQueryPeriod from "src/components/query/selectQueryPeriod.vue";
import matchStatusmixin from "src/mixins/pages/match/matchStatus.js";
import randomBgColor from "src/mixins/style/randomBgColor.js";
import matchManageMixin from "src/mixins/pages/match/matchManage.js";
import tableheader from "src/components/table/tableheader.vue";
import pandaPagination from "src/components/pagination/pagination.vue";
import breakwordsmixin from "src/mixins/style/breakwords.js";
import formartmixin from "src/mixins/module/formartmixin.js";
import selectedApiModel from "src/mixins/constant/module/selectedApiModel.js";
import constantmixin from "src/mixins/constant/index.js";
import dialogmixin from "src/mixins/module/dialogmixin.js";
import alertmessagemixin from "src/mixins/module/alertmessagemixin.js";
import alert_component from "src/config/alert/match.js";
import tablecellshow from "src/components/table/tablecellshow.vue";

import { dom } from "quasar";
const { height, width } = dom;
export default {
  mixins: [
    ...constantmixin,
    tableColWidthmixin,
    matchmixin,
    matchStatusmixin,
    randomBgColor,
    matchManageMixin,
    selectedTableItemMixin,
    selectedApiModel,
    formartmixin,
    breakwordsmixin,
    dialogmixin,
    alertmessagemixin
  ],
  data() {
    return {};
  },
  components: {
    tablecellshow
  },
  props: {
    props: "",
    is_top_slot: "",
    show_right_detail_obj: "",
    table_col_leagueName_color_map: "",
    tablecolumns: "",
    label_item: ""
  },
  methods: {
    emit_init_tabledata() {
      this.$emit("init_tabledata");
    },
    table_item_click(item) {
      this.$emit("item_click", item);
    },
    table_item_click_expanded(item) {
      this.$emit("table_item_click_expanded", item);
    },

    selected_table_items_change(item) {
      this.$emit("toggle_select", item);
    },

    compute_table_row_bg(item) {
      let str = "";
      str = item.is_child_showing ? "bg-panda-dark-dark" : "bg-panda-base-dark";
      if (item.is_selected) {
        str = "bg-panda-dark-light";
      }
      if (item.id == this.show_right_detail_obj.id) {
        str = "bg-panda-dark-light";
      }
      return str;
    },
    to_show_match_edit(item) {
      console.log(item);
      if (item && item.standard) {
        this.$router.push({
          name: "match_manage_edit",
          query: {
            editing_obj_id: item.id,
            which_button: 2
          }
        });
      } else {
        this.to_show_edit_not_standard(item, 1);
      }
    },

    to_show_open_edit(item) {
      console.log(item);
      if (item && item.standard) {
        this.table_item_click(item);
        this.$router.push({
          name: "match_manage_edit",
          query: {
            editing_obj_id: item.id,
            which_button: 1
          }
        });
      } else {
        this.to_show_edit_not_standard(item, 2);
      }
    },

    to_show_edit_not_standard(item, num) {
      let message = `<div class='q-mt-lg'>当前数据为非标准数据，将会先执行三方数据入库操作，是否继续？</div>`;

      this.$q
        .dialog({
          title: "",
          message: message,
          html: true,
          persistent: true,

          cancel: {
            color: "white",
            label: "取消",
            textColor: "black"
          },
          ok: {
            label: "确定"
          }
        })
        .onOk(() => {
          this.handle_associate_match_onOk(item, num);
        })
        .onCancel(() => {
          this.finish_script_dialog_process_default();
        })
        .onDismiss(() => {
          console.log("I am triggered on both OK and Cancel");
        });
    },

    handle_associate_match_onOk(item, num) {
      // 必须 有两条数据 商
      // 单条  BC 可以直接 通过生成联赛ID 直接 两次调用 生成 标准联赛 并生成联赛ID
      let params = {
        sourceId: [item.id],
        standardId: ""
      };
      api_match.post_matchManager_associate(params).then(res => {
        let code = this.$lodash.get(res, "data.code");
        if (code == 200) {
          let data = this.$lodash.get(res, "data.data.records")[0];
          if (num == 2) {
            this.to_show_open_edit(data);
          } else if (num == 1) {
            this.to_show_match_edit(data);
          }
        } else {
          this.alert_message(res);
        }
      });
    },
    handle_undo_associate_match(item) {
      let message = alert_component.Association_data;
      this.to_undo_associate_match_item = item;
      this.begin_script_dialog_process(
        message,
        this.handle_undo_associate_match_onOk
      );
    },
    handle_undo_associate_match_onOk() {
      let item = this.to_undo_associate_match_item;

      let params = {
        sourceId: item.id,
        targetId: item.parent_id
      };

      console.log(params);
      // return false;

      api_match.post_matchManager_undoAssociate(params).then(res => {
        let code = this.$lodash.get(res, "data.code");
        if (code == 200) {
          this.handle_dialog_onOk_callback_success(
            alert_component.Unlink_success,
            () => {
              this.emit_init_tabledata();
            }
          );
        } else {
          this.handle_dialog_onOk_callback_error(
            alert_component.Unlink_failure
          );
          this.alert_message(res);
        }
      });
    },

    compute_if_handle_btn_show(item, num) {
      let show = false;
      if (num == 1) {
        // item.matchManageCode&&
        if (!item.is_child_showing) {
          show = true;
        }
      } else if (num == 5) {
        // 取消关联
        if (
          item.is_child_showing &&
          item.dataSourceCode != item.parent_dataSourceCode
        ) {
          show = true;
        }
      }

      return show;
    }
  }
};
</script>